<div ng-controller="AdminRecognitionCtrl as vm">
<section class="content-header">
    <!-- Content Header (Page header) -->
    Recognition Report
    <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> HR - Recognition</a></li>
    </ol>
</section>
<!-- Main content -->
<section class="content">
    <div class="row">
		<div class="col-md-12">
			<div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title">Employee recognition summary report</h3>
                    <div class="pull-right">
                    	<form class="form-inline">
						  <div class="form-group">
						    <select class="form-control" ng-options="div for div in years track by div" ng-model="vm.year" ng-change="vm.loadData()">
                      </select>
						  </div>
						  <div class="form-group">
						    <select class="form-control" ng-options="div for div in months track by div" ng-model="vm.month" ng-change="vm.loadData()">
                      </select>
						  </div>
                          <div class="form-group">
                                    <select class="form-control" ng-options="div.name for div in regions track by div.id" ng-model="vm.region" ng-change="vm.regionChange()">
                                        <option ng-if="role!='Sub-Region Admin'"  value="">--- Sub-Region ---</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <select class="form-control" ng-options="div.name for div in clusters track by div.id" ng-model="vm.cluster" ng-change="vm.loadData()">
                                        <option value="">--- Cluster ---</option>
                                    </select>
                                </div>
						</form>
                       
                      
                    </div>
                </div>
                <div class="box-body table-responsive no-padding" style="height: 600px">

                				
                            <table ng-table="vm.tableParams" class="table table-hover table-bordered table-condensed" template-header="customHeader.html" show>
                            	
                            	<tr ng-repeat="ret in $data">
						        <td title="'Hotel Name'" filter="{ hotel: 'text'}" sortable="'hotel'">
						            {{ret.hotel}}</td>
						        <td title="'MTD'" filter="{ 'data[0].mtd': 'number'}" sortable="'data[0].mtd'">
						            {{ret.data[0].mtd}}</td>
						        <td title="'YTD'" filter="{ 'data[0].ytd': 'number'}" sortable="'data[0].ytd'">
						            {{ret.data[0].ytd}}</td>
						        <td title="'MTD'" filter="{ 'data[1].mtd': 'number'}" sortable="'data[1].mtd'">
						            {{ret.data[1].mtd}}</td>
						        <td title="'YTD'" filter="{ 'data[1].ytd': 'number'}" sortable="'data[1].ytd'">
						            {{ret.data[1].ytd}}</td>
						        <td title="'MTD'" filter="{ 'data[2].mtd': 'number'}" sortable="'data[2].mtd'">
						            {{ret.data[2].mtd}}</td>
						        <td title="'YTD'" filter="{ 'data[2].ytd': 'number'}" sortable="'data[2].ytd'">
						            {{ret.data[2].ytd}}</td>
						    </tr>
                       
                            </table>
                </div>
                <!-- /.box-body -->
            </div>
            <!-- /.box -->
		</div>
    </div>

</section>
 <script type="text/ng-template" id="customHeader.html">
    <tr>	
                            		<th></th>
                            		<th colspan="2">Brand Service Regnition</th>
                            		<th colspan="2">Winning Ways Award</th>
                            		<th colspan="2">Other Award</th>
                            	</tr>
                            	<tr>	
                            		<th>Hotel Name</th>
                            		<th>MTD</th>
                            		<th>YTD</th>
                            		<th>MTD</th>
                            		<th>YTD</th>
                            		<th>MTD</th>
                            		<th>YTD</th>
                            	</tr>
  </script>
</div>

